tsx 로 TypeScript 코드 실행하기

tsx 는 TypeScript 코드를 실행할 수 있는 런타임 패키지이다. 일반적으로 자주 쓰이는 TS 런타임 ts-node 와 비교하며 tsx 를 사용하는 이유에 대해 알아보자.

목차

• tsx란?
• 설치
• 사용법
• ts-node 와 비교
• 단점
• 결론

tsx란?

대부분의 JS/TS 개발자들은 "tsx? 그거 TS + XML 확장자명 아닌가요?" 라고 생각할 것이다. 하지만 여기서 소개할 tsx 는 JSX 파일 확장자명이 아닌, TypeScript 런타임 패키지이다. ts-node 와 역할은 비슷하지만 사용법은 훨씬 간단하다.

설치

설치는 여느 Node 패키지와 마찬가지로 npm 을 이용해 설치할 수 있다. 로컬로 설치하면 npx 로 실행해야 하지만, 전역으로 설치하면 더 간단히 어디서든 실행할 수 있으니 전역으로 설치하자.

npm install -g tsx

사용법

사용법은 정말 간단하다. tsx 명령어 뒤에 실행할 TypeScript 코드 파일을 입력하면 된다.

tsx path/to/file.ts

ts-node 와 비교

ts-node 도 마찬가지로 TS 런타임이긴 하지만 tsx 가 훨씬 사용하기 쉽다. tsx 는 번거로운 설정 없이 간단하게 TypeScript 코드를 실행할 수 있다.

mkdir tsx-example && cd tsx-example
echo "console.log('hello');" > index.ts
tsx . # hello

tsconfig.json 을 설정하지 않아도 바로 파일을 실행할 수 있다. 또 ESM 을 지원하는 것은 물론이고 심지어 CommonJS 와 섞어 쓸 때도 문제가 없다.

echo 'export const asd = () => "asd";' > asd.mjs
echo 'module.exports.qwe = () =>  "qwe";' > qwe.cjs
echo 'import { asd } from "./asd.mjs";import { qwe } from "./qwe.cjs";console.log(asd(), qwe());' > index.ts
tsx . # asd qwe
ts-node . # Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/chanhaeng/GitHub/blog-posts/asd/asd.mjs not supported.

또 경로 Alias 를 설정하는 paths 도 지원한다.

mkdir zxc
echo '{ "compilerOptions": { "paths": { "@/*": ["./zxc/*"] } } }' > tsconfig.json
echo 'export const zxc = () => "zxc";' > zxc/index.ts
echo 'export const sdf = () => "sdf";' > zxc/sdf.ts
echo 'import { zxc } from "@/.";import { sdf } from "@/sdf";console.log(zxc(), sdf());' > index.ts
tsx . # zxc sdf
ts-node . # Error: Cannot find module '@/.'

참고로 현재까지 알려진 Node.js 의 TS 런타임 패키지 중 해당 기능을 지원하는 것은 tsx 뿐이다.
Node.js TypeScript 런타임 비교 문서에서 tsx 와 다른 TS 런타임 패키지를 비교해보자.

단점

단점이라고 하자면 tsx 는 ts-node 와 달리 타입 체크를 지원하지 않는다. tsx 는 간단한 TS 런타임을 지향하기 때문에 타입 체크를 하지 않는다고 한다. 대신 VSCode 등의 에디터의 타입 체크 기능이나 tsc 의 --noEmit 옵션을 이용해 타입 체크를 하라고 한다. 확실히 대체할 수 있는 것들이 있는 부분이지만 어떻게 보면 타입이야 말로 TS의 본질이니 아쉽게 느껴진다. ~~타입 못 쓰면 JS랑 뭐가 다르냐~~

결론

단점이 크긴 하지만 워낙 사용하기 쉽다보니 tsx 를 자주 사용하게 될 것 같다.